<!----- 内容说明： --------------------------------------------->
<!----- 一个使用 Bootstrap 设计实现的页面 ------------------------>
<!----- 输入栏、展示栏、导航菜单等，请参考 Bootstrap 组件部分示例 ------->
<!----- 滑动窗等运动特效，请参考 Bootstrap JS 插件部分示例 ----------->
<!----- 排版、表单、按钮、图片等，请参考 Bootstrap CSS 式样部分示例 ----->
<!---------------------------------------------------------->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BootstrapTemplate</title>

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- 图片占位工具 holder.js -->
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>

<style type="text/css">
	.jx{
		border-bottom: 2px solid yellow;
	}
	.paddtop{
		padding-top: 5px;
	}
</style>
</head>

<body>
<!-- 1.页眉部分 -->
<header class="container-fluid">
	<div class="row">
		<img src="holder.js/100px100?theme=vine" class="img-responsive"/>
	</div>
	<div class="row">
		<div class="col-md-3">
			<img src="holder.js/100px64?text=logo" class="img-responsive"/>
		</div>
		<div class="col-md-5">
			<div class="input-group" style="margin-top: 10px;">
			<input type="text" class="form-control" placeholder="请输入搜索内容" aria-describedby="basic-addon2">
			<span class="input-group-addon" id="basic-addon2">搜索</span>
			</div>
		</div>
		<div class="col-md-4">
			<img src="holder.js/100px64?text=phone number" class="img-responsive"/>
		</div>
	</div>
	<div class="row">
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!--  -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">首页</a>
				</div>

				<!--  -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				  <ul class="nav navbar-nav">
					<li class="active"><a href="#">Link1 <span class="sr-only">(current)</span></a></li>
					<li><a href="#">Link2</a></li>
					<li><a href="#">Link3</a></li>
					<li><a href="#">Link4</a></li>
				  </ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
	</div>
	<div class="row">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

		  <!-- Wrapper for slides -->
		  <div class="carousel-inner" role="listbox">
			<div class="item active">
			  <img src="holder.js/100px250?random=yes" alt="...">
			  <div class="carousel-caption">
				image1
			  </div>
			</div>
			<div class="item">
			  <img src="holder.js/100px250?random=yes" alt="...">
			  <div class="carousel-caption">
				image2
			  </div>
			</div>
			<div class="item">
			  <img src="holder.js/100px250?random=yes" alt="...">
			  <div class="carousel-caption">
				image3
			  </div>
			</div>
		  </div>

		  <!-- Controls -->
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		  </a>
		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		  </a>
		</div>
	</div>
</header>
<!-- 2.主体部分 -->
<div class="container">
	<!-- Group1 -->
	<div class="row jx">
		<img src="holder.js/24x24?theme=sky"/>
		<span>Group1</span>
	</div>
	<div class="row paddtop">
		<div class="col-xs-6 col-md-3">
			<div class="thumbnail">
				<img src="holder.js/150x150?text=stall" alt="...">
				<div class="caption">
					<h3>Thumbnail label</h3>
					<p>介绍..</p>
					<font color="red">￥ 699</font>
					<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3">
			<div class="thumbnail">
				<img src="holder.js/150x150?text=stall" alt="...">
				<div class="caption">
					<h3>Thumbnail label</h3>
					<p>介绍..</p>
					<font color="red">￥ 699</font>
					<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3">
			<div class="thumbnail">
				<img src="holder.js/150x150?text=stall" alt="...">
				<div class="caption">
					<h3>Thumbnail label</h3>
					<p>介绍..</p>
					<font color="red">￥ 699</font>
					<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
				</div>
			</div>
		</div>
		<div class="col-xs-6 col-md-3">
			<div class="thumbnail">
				<img src="holder.js/150x150?text=stall" alt="...">
				<div class="caption">
					<h3>Thumbnail label</h3>
					<p>介绍..</p>
					<font color="red">￥ 699</font>
					<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
				</div>
			</div>
		</div>
	</div>
	
	<!-- Group2 -->
	<div class="row jx">
		<img src="holder.js/24x24?theme=sky"/>
		<span>Group2</span>
	</div>
	<div class="row paddtop">
		<div class="col-xs-6 col-md-4">
			<div class="thumbnail">
				<img src="holder.js/250x250?text=stall" alt="...">
			</div>
		</div>
		<div class="col-xs-6 col-md-8">
			<div class="row">
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
				<div class="col-xs-6 col-md-4">
					<div class="thumbnail">
					<img src="holder.js/100x100?text=stall" alt="...">
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 3.页脚部分 -->
<footer class="container-fluid">
	<div class="row">
		<img src="holder.js/100px60?theme=lava" class="img-reponsive">
	</div>
	<div class="row" style="text-align: center;">
		<span>xxxxxx 版权所有Copyright 2006-20xx, All Rights Reserved 沪ICP备 xxxxxxxx</span>
	</div>
</footer>
</body>
</html>